<template>
  <div class="body">
    <div class="main"></div>
    <div class="footer">
      <div class="bubbles">
        <div
          class="bubble"
          style="
            --size: 2.1418300627453686rem;
            --distance: 6.006419013305523rem;
            --position: 59.80150683216047%;
            --time: 3.496644058457254s;
            --delay: -2.2529773798160586s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.70534834795202rem;
            --distance: 7.7082502247504605rem;
            --position: 26.950153633623813%;
            --time: 3.4328888807226345s;
            --delay: -3.2668474606317264s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.410475758878392rem;
            --distance: 6.649274620932195rem;
            --position: -0.736966731420603%;
            --time: 3.3032702270138317s;
            --delay: -3.8469837338924475s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.428184304146378rem;
            --distance: 8.474817114749989rem;
            --position: 50.352619291273356%;
            --time: 3.2951065855720687s;
            --delay: -3.746464247437553s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.328608243362205rem;
            --distance: 7.111639763568503rem;
            --position: 16.790726363541637%;
            --time: 3.8539535038798385s;
            --delay: -3.3860879974232447s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.253564618755399rem;
            --distance: 8.480238914353112rem;
            --position: 39.722539970183675%;
            --time: 3.3545037170724794s;
            --delay: -2.584112062762151s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.851253185179837rem;
            --distance: 9.71342805230557rem;
            --position: 103.43590044933045%;
            --time: 2.0306344201060473s;
            --delay: -2.3607484862242396s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.8059540359682646rem;
            --distance: 7.687259417534779rem;
            --position: 38.77671199347059%;
            --time: 3.4038431026727802s;
            --delay: -2.823005138926184s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.6980560836783525rem;
            --distance: 8.23030163960021rem;
            --position: 63.796056315580074%;
            --time: 2.94114025572134s;
            --delay: -3.3340493316589583s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.1438645636668108rem;
            --distance: 8.199572651084479rem;
            --position: 66.88550888607834%;
            --time: 3.130358393443551s;
            --delay: -2.3909606988622003s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.667873040035678rem;
            --distance: 6.408615474732968rem;
            --position: 36.239833278462044%;
            --time: 3.0957414597444837s;
            --delay: -3.7128915870300876s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.252268923710708rem;
            --distance: 7.904186581693929rem;
            --position: 61.67722396182455%;
            --time: 3.163873305582899s;
            --delay: -3.7523332849916486s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.62451849548703rem;
            --distance: 9.805077053970631rem;
            --position: 8.307226243285243%;
            --time: 3.601890117354273s;
            --delay: -2.821084673442512s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.042583656803456rem;
            --distance: 6.071302263419938rem;
            --position: 33.73617614001666%;
            --time: 2.243358673121174s;
            --delay: -2.549249890543695s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.4421702719344767rem;
            --distance: 7.759081919835576rem;
            --position: 68.55441164027684%;
            --time: 2.0549373297942504s;
            --delay: -3.180714185377785s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.049704348723732rem;
            --distance: 6.668643829912814rem;
            --position: 51.73120316452495%;
            --time: 2.813219970891238s;
            --delay: -3.960701725361288s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.573135953875706rem;
            --distance: 8.040109091955372rem;
            --position: 45.44547150296133%;
            --time: 2.0388896344719156s;
            --delay: -3.3935706056530255s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.546034016476928rem;
            --distance: 7.98395546976613rem;
            --position: 47.35945567491544%;
            --time: 3.958126065787665s;
            --delay: -3.147153393993869s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.207246253656252rem;
            --distance: 8.618448600193444rem;
            --position: 103.86724264796878%;
            --time: 2.751836831643856s;
            --delay: -3.439329897383107s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.024745154331146rem;
            --distance: 9.745283525642652rem;
            --position: 56.43819053405503%;
            --time: 2.8853557259794624s;
            --delay: -2.272520748233057s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.657586443524884rem;
            --distance: 8.541006286480648rem;
            --position: 86.24829499608441%;
            --time: 2.968894253278601s;
            --delay: -2.521749238077302s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.1353251755145477rem;
            --distance: 8.020405551766572rem;
            --position: 97.68932185219379%;
            --time: 3.4475264167213178s;
            --delay: -2.253094784746835s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.456867702428946rem;
            --distance: 8.533771096620805rem;
            --position: 34.76388011041624%;
            --time: 3.568966439402371s;
            --delay: -2.7983915679234217s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.348939524432483rem;
            --distance: 9.997851401043693rem;
            --position: 80.20656293949867%;
            --time: 3.402109513903364s;
            --delay: -2.18180522550222s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.2040074639012515rem;
            --distance: 7.222909607103989rem;
            --position: 86.78663668794138%;
            --time: 3.6849824766392465s;
            --delay: -2.0444549160309835s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.121702354085812rem;
            --distance: 6.630553085618437rem;
            --position: 56.918368018006674%;
            --time: 3.3375303926559785s;
            --delay: -3.9319848533732293s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.168068212915232rem;
            --distance: 6.873556156429013rem;
            --position: 91.15515530234437%;
            --time: 3.5403662147215607s;
            --delay: -3.713832081947016s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.5788251077689957rem;
            --distance: 9.634841961703358rem;
            --position: 20.419251432587288%;
            --time: 2.829792195697727s;
            --delay: -2.2577012645870256s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.74255020415284rem;
            --distance: 8.639516546537234rem;
            --position: 103.60192545801335%;
            --time: 2.5687380103576283s;
            --delay: -2.7453837200137725s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.912832464666307rem;
            --distance: 6.274210550937709rem;
            --position: 23.645713060842986%;
            --time: 2.9401667522669457s;
            --delay: -2.5211549925473316s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.313382832189663rem;
            --distance: 6.802333902350971rem;
            --position: 82.38446520824527%;
            --time: 3.3647549959981338s;
            --delay: -3.157931791478188s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.948181163812823rem;
            --distance: 8.326170079931893rem;
            --position: 86.42264408854432%;
            --time: 3.5722297515129875s;
            --delay: -3.7217211142286235s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.4229827193604496rem;
            --distance: 9.800278284156668rem;
            --position: 56.841894936155214%;
            --time: 2.357422188956552s;
            --delay: -2.5384263757412486s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.910081183696684rem;
            --distance: 9.841883799445473rem;
            --position: 32.91550728842314%;
            --time: 3.809474775803129s;
            --delay: -3.455901389923921s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.231147324761549rem;
            --distance: 6.643146927881838rem;
            --position: 29.455280778169616%;
            --time: 2.0908495063424315s;
            --delay: -3.1452528919059097s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.302444000583928rem;
            --distance: 7.194589282798854rem;
            --position: 30.74367882685754%;
            --time: 2.678718635561476s;
            --delay: -3.5504805480342294s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.091826478880229rem;
            --distance: 8.072311295594993rem;
            --position: 58.90601807169505%;
            --time: 3.457513968072559s;
            --delay: -2.2975616530868215s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.256664181042214rem;
            --distance: 6.774392262015231rem;
            --position: 98.16191092710305%;
            --time: 3.5372800534357864s;
            --delay: -2.7786966184945157s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.988921806477675rem;
            --distance: 7.560971735049454rem;
            --position: 73.80761132323971%;
            --time: 2.8444136908329467s;
            --delay: -3.931770842732289s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.9619539505879953rem;
            --distance: 6.153483754068814rem;
            --position: 52.372128533037085%;
            --time: 2.9198384228327128s;
            --delay: -3.8526318344355084s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.173969782396614rem;
            --distance: 8.585009938932863rem;
            --position: -1.9694736270132074%;
            --time: 2.1650840559611524s;
            --delay: -3.6114790108114443s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.048922226330884rem;
            --distance: 7.3211775308841895rem;
            --position: 63.76389281917001%;
            --time: 2.377519552438105s;
            --delay: -2.9153849831266787s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.728157363627181rem;
            --distance: 7.721858958741636rem;
            --position: 101.11876140390414%;
            --time: 2.8724548736703737s;
            --delay: -2.115577600489965s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.199172462981882rem;
            --distance: 8.037871837792348rem;
            --position: 85.78738870857029%;
            --time: 3.1102685623060413s;
            --delay: -2.4765566304990654s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.111976604503522rem;
            --distance: 7.1319643029089175rem;
            --position: 28.560448651412116%;
            --time: 3.8627104535913483s;
            --delay: -3.4801790984390295s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.953348484066995rem;
            --distance: 6.571610161803894rem;
            --position: 99.54746346625818%;
            --time: 2.38619563607984s;
            --delay: -2.8869189505032846s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.6531264356210063rem;
            --distance: 6.128960758524648rem;
            --position: 42.46098689580035%;
            --time: 3.9767273917744324s;
            --delay: -2.32196753684345s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.090209994386624rem;
            --distance: 6.807803569850893rem;
            --position: 45.8601337753298%;
            --time: 3.689796117736839s;
            --delay: -2.653057572903023s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.81464445590408rem;
            --distance: 7.378887533293978rem;
            --position: 23.34583815699153%;
            --time: 2.385347642569293s;
            --delay: -2.0347663060237795s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.0418168148976363rem;
            --distance: 6.675150003136528rem;
            --position: 39.22040511790005%;
            --time: 3.0012011062186112s;
            --delay: -3.6792197676775533s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.945492227250197rem;
            --distance: 9.041603937251569rem;
            --position: 20.442999163783483%;
            --time: 2.63790837696203s;
            --delay: -2.4521823706515313s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.8434410649143693rem;
            --distance: 9.928329332633151rem;
            --position: 15.96301100163194%;
            --time: 3.2680045160714584s;
            --delay: -3.8599382607158677s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.3902159121855124rem;
            --distance: 9.089852547587933rem;
            --position: 7.041497890452542%;
            --time: 3.9013798634049595s;
            --delay: -2.2621147175486733s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.136188079338936rem;
            --distance: 8.991768043974947rem;
            --position: 33.51275085837964%;
            --time: 2.1678964976663395s;
            --delay: -2.1899970365244523s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.204688787852628rem;
            --distance: 9.609783862358817rem;
            --position: 98.22385385461364%;
            --time: 2.4213052120213687s;
            --delay: -2.6058551150908116s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.3830249922082825rem;
            --distance: 6.421283513262778rem;
            --position: 9.923102450213355%;
            --time: 2.7622509839631313s;
            --delay: -3.4065742410062834s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.932255830976427rem;
            --distance: 9.247226477499776rem;
            --position: 31.555687410889504%;
            --time: 2.455670744714097s;
            --delay: -2.6576581554774967s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.8809152061408607rem;
            --distance: 9.88768044953104rem;
            --position: -2.017973930967285%;
            --time: 3.9341189951452926s;
            --delay: -3.2767654229424066s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.308579339207978rem;
            --distance: 7.813447126866433rem;
            --position: 81.98688503025598%;
            --time: 2.670316438838228s;
            --delay: -3.517077533128244s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.40677883833691rem;
            --distance: 6.653516027990305rem;
            --position: 94.46652369202387%;
            --time: 3.3242336280508185s;
            --delay: -2.715123196558737s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.6617531037410416rem;
            --distance: 9.270098985365287rem;
            --position: 22.363333050833933%;
            --time: 3.976407067956665s;
            --delay: -3.9518435546273207s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.368457590638395rem;
            --distance: 9.553926730888271rem;
            --position: 5.351975776042027%;
            --time: 3.0894497484820045s;
            --delay: -2.2118011791920753s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.070639172410947rem;
            --distance: 7.666342238400865rem;
            --position: 33.092629722236914%;
            --time: 3.876443566917829s;
            --delay: -3.6583033770246574s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.154022914850419rem;
            --distance: 6.810302426031927rem;
            --position: 86.8621919195987%;
            --time: 2.0961196221177616s;
            --delay: -3.2755380820046756s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.366755233042922rem;
            --distance: 8.917850879036157rem;
            --position: 25.42723518514743%;
            --time: 3.0570431903347677s;
            --delay: -3.0190365947106095s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.694256859455338rem;
            --distance: 9.86089341547476rem;
            --position: 30.363571520543132%;
            --time: 3.823314022469525s;
            --delay: -2.248037014685272s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.1070761383150893rem;
            --distance: 6.45888949228919rem;
            --position: 15.584614576262137%;
            --time: 2.9109483418303586s;
            --delay: -3.1975922009027435s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.8533103974737895rem;
            --distance: 9.672708997239546rem;
            --position: 69.33026209343284%;
            --time: 2.183898762308347s;
            --delay: -2.2409721963815654s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.8480823023068558rem;
            --distance: 6.00553722822483rem;
            --position: 7.129550649188822%;
            --time: 2.396401687399424s;
            --delay: -2.894708719112223s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.4009572743812644rem;
            --distance: 9.415454241871913rem;
            --position: 35.65069052434252%;
            --time: 2.707749335662725s;
            --delay: -3.2796723020773277s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.8027425002916395rem;
            --distance: 6.338890681248066rem;
            --position: 76.13154276284247%;
            --time: 3.042209427831423s;
            --delay: -3.7007462680548686s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.680246933102116rem;
            --distance: 7.055411312151741rem;
            --position: 64.33292019578401%;
            --time: 2.68533127513386s;
            --delay: -2.318791119549056s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.2894812485913354rem;
            --distance: 9.832548407843142rem;
            --position: 102.59650590911103%;
            --time: 2.3284976828590835s;
            --delay: -3.664233927970752s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.006412743363598rem;
            --distance: 9.073216232960228rem;
            --position: 43.94199643466355%;
            --time: 2.486953149656797s;
            --delay: -2.9888508777374736s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.5247426653773823rem;
            --distance: 7.184868016885249rem;
            --position: 80.85783744806193%;
            --time: 2.168665790533743s;
            --delay: -3.3853980033402284s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.0142335373315756rem;
            --distance: 8.114617569198092rem;
            --position: 0.15483114357861538%;
            --time: 2.1165367385843883s;
            --delay: -3.456838817387651s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.194024981160209rem;
            --distance: 6.135353324431371rem;
            --position: 83.92452888234487%;
            --time: 2.8414808939559273s;
            --delay: -2.4122966690930925s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.7578537165174186rem;
            --distance: 8.799721582619405rem;
            --position: 7.117502520576679%;
            --time: 3.1330125910284554s;
            --delay: -2.6230985549777084s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.447908167595174rem;
            --distance: 7.8851573091039295rem;
            --position: 16.781897517633453%;
            --time: 2.3003829535082208s;
            --delay: -3.313934502121752s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.3099806859030876rem;
            --distance: 8.270624717057668rem;
            --position: 12.54742183490427%;
            --time: 3.913927627248275s;
            --delay: -3.6674401846366314s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.4936115704658315rem;
            --distance: 6.230007417978826rem;
            --position: 94.38985685909091%;
            --time: 3.159865734636076s;
            --delay: -2.4249380280842647s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.7452700391946907rem;
            --distance: 9.910880512769344rem;
            --position: 65.89288336801108%;
            --time: 3.3417293923359312s;
            --delay: -2.452260306697396s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.147272399064706rem;
            --distance: 7.1557977077886195rem;
            --position: 24.47621127855308%;
            --time: 2.4471426497695488s;
            --delay: -3.010948893397302s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.6294225753887366rem;
            --distance: 9.999285740505258rem;
            --position: 54.89648251485714%;
            --time: 2.1332765571951127s;
            --delay: -2.4575466224729112s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.257680170020385rem;
            --distance: 9.078154891594735rem;
            --position: 76.26892535062849%;
            --time: 2.8983535867866568s;
            --delay: -3.884103356823854s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.42945890253067rem;
            --distance: 7.008148988388575rem;
            --position: 44.5526036590559%;
            --time: 3.8470501599193097s;
            --delay: -3.016873148349993s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.5829307046537355rem;
            --distance: 6.377629636416612rem;
            --position: 44.84050199709978%;
            --time: 2.0425582962624955s;
            --delay: -2.648183379769922s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.022222919222796rem;
            --distance: 8.246171169642158rem;
            --position: 35.092072015509515%;
            --time: 3.3755255663935135s;
            --delay: -3.2358244540521355s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.571616550289392rem;
            --distance: 6.4910690297234295rem;
            --position: 91.44794247613818%;
            --time: 2.699367968370884s;
            --delay: -3.357360768556227s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.903715040411539rem;
            --distance: 8.585925670486535rem;
            --position: 89.4543720144696%;
            --time: 3.737668902402856s;
            --delay: -2.0117342511416205s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.282046343942472rem;
            --distance: 6.480677987089009rem;
            --position: 73.87927806465055%;
            --time: 3.268404494079675s;
            --delay: -3.3528990083214487s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.217064862290412rem;
            --distance: 8.808046377212781rem;
            --position: 60.877410979738144%;
            --time: 2.3998799564170814s;
            --delay: -3.3638629959189252s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.5339249364899867rem;
            --distance: 6.348308375004594rem;
            --position: 86.97043267360264%;
            --time: 2.047674602227565s;
            --delay: -3.2217818018518307s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.8706630128569746rem;
            --distance: 6.1222804412868035rem;
            --position: 89.93094702133%;
            --time: 2.1249398782501103s;
            --delay: -3.072325075342594s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.7351893963269074rem;
            --distance: 8.086621947178191rem;
            --position: 102.83214295710887%;
            --time: 3.0562717842860616s;
            --delay: -2.5470872481866618s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.957116001199166rem;
            --distance: 8.536367701514436rem;
            --position: 10.874689606744498%;
            --time: 3.31105044619022s;
            --delay: -3.8408971806188226s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.1738302844035955rem;
            --distance: 7.0505678127382625rem;
            --position: 102.88575404029551%;
            --time: 2.027352031003026s;
            --delay: -2.1771943403661282s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.381570959970606rem;
            --distance: 9.195372347292311rem;
            --position: 5.122223670460306%;
            --time: 3.5646746338223867s;
            --delay: -3.8371303574480264s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.235151612061503rem;
            --distance: 8.282817822314964rem;
            --position: 51.503730782294525%;
            --time: 3.8467981787603622s;
            --delay: -3.9785095622209825s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.7785081277777275rem;
            --distance: 7.557989327897316rem;
            --position: 25.263147486807153%;
            --time: 3.5687539401291746s;
            --delay: -2.1660591623657997s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.674921137717497rem;
            --distance: 7.619959640997462rem;
            --position: -2.3707008938452367%;
            --time: 3.2587127095843225s;
            --delay: -3.5532551722799606s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.217926819334927rem;
            --distance: 8.351887996590534rem;
            --position: 25.127547304311527%;
            --time: 2.3825607473828443s;
            --delay: -3.2868065409005722s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.225442815893934rem;
            --distance: 7.581270485943845rem;
            --position: 68.02921845278895%;
            --time: 2.1837510720495725s;
            --delay: -2.4604939264298267s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.15925152464056rem;
            --distance: 6.614576622066896rem;
            --position: 15.60361935053296%;
            --time: 2.279729883565979s;
            --delay: -3.7562081636500664s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.663576680215282rem;
            --distance: 8.519407115051472rem;
            --position: 48.816093612957985%;
            --time: 2.260964629605821s;
            --delay: -2.659829624159295s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.55733875692611rem;
            --distance: 9.854017618040366rem;
            --position: 48.167651007980695%;
            --time: 3.7134126036151596s;
            --delay: -3.904444056715101s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.4415676385940674rem;
            --distance: 9.281853432881785rem;
            --position: 69.16057884449059%;
            --time: 3.384463503637594s;
            --delay: -2.7112844648465804s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.8044783347404705rem;
            --distance: 7.19499570886158rem;
            --position: 53.439118998560495%;
            --time: 3.277138805959388s;
            --delay: -2.033528371899648s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.957822014572449rem;
            --distance: 7.645396978187348rem;
            --position: 13.056942421567634%;
            --time: 3.898691579945571s;
            --delay: -2.6964777709651973s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.024885616684079rem;
            --distance: 8.80531056827521rem;
            --position: 68.45330455482295%;
            --time: 3.282638010879595s;
            --delay: -3.5736050081494994s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.915807291590462rem;
            --distance: 9.66570584742115rem;
            --position: 83.2579720166408%;
            --time: 3.953573672050687s;
            --delay: -2.0061450522681934s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.017985455468043rem;
            --distance: 8.422776868343771rem;
            --position: 50.09574934254991%;
            --time: 3.341540024151383s;
            --delay: -2.4957483010153547s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.2817300684158868rem;
            --distance: 9.12475331599627rem;
            --position: 33.81416192393223%;
            --time: 2.5510544433766102s;
            --delay: -3.5190841841299787s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.8794553218255805rem;
            --distance: 8.294588880403841rem;
            --position: 91.1719999178891%;
            --time: 2.1828707106302008s;
            --delay: -3.506115682837099s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.114116938653364rem;
            --distance: 8.692899363487358rem;
            --position: 49.78390352534537%;
            --time: 2.0089582968606168s;
            --delay: -2.1703671026785214s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.763485856760917rem;
            --distance: 7.977685264314988rem;
            --position: 92.0648620108905%;
            --time: 3.4169307147773824s;
            --delay: -2.4926198531994452s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.4162038880205614rem;
            --distance: 6.570267323072107rem;
            --position: 23.13084451657363%;
            --time: 2.6120822833040367s;
            --delay: -2.032561550868475s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.112862969365235rem;
            --distance: 9.867594936085503rem;
            --position: 2.544070692330105%;
            --time: 2.889717720368992s;
            --delay: -3.6070853898711817s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.44918459823801rem;
            --distance: 8.000588687152344rem;
            --position: 51.8435839696586%;
            --time: 3.541094721300156s;
            --delay: -2.4807454315085873s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 5.924685008634272rem;
            --distance: 7.690160115343495rem;
            --position: 12.999100926791026%;
            --time: 3.744066144302251s;
            --delay: -3.421825948288096s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.1354383871138rem;
            --distance: 8.284190981454701rem;
            --position: 64.60154301088406%;
            --time: 2.300188323162527s;
            --delay: -3.419027613669513s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.040243538774579rem;
            --distance: 9.810801991885405rem;
            --position: 46.684081134004025%;
            --time: 2.744984109855636s;
            --delay: -3.6900069706679566s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.155541805533189rem;
            --distance: 9.138898538933008rem;
            --position: 79.71787444641109%;
            --time: 3.5970169917050527s;
            --delay: -2.0440061212417717s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 2.8330073291829905rem;
            --distance: 9.8117069063963rem;
            --position: 69.72707821371881%;
            --time: 3.7246197488655275s;
            --delay: -3.9258450341128603s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.4180649230531355rem;
            --distance: 7.212580743896017rem;
            --position: 101.78902990433458%;
            --time: 2.900559610082512s;
            --delay: -2.476651600335817s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.336285523626159rem;
            --distance: 9.209500025837725rem;
            --position: 84.77429848164958%;
            --time: 2.6276045570293958s;
            --delay: -2.7352580713489156s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 4.712035007485932rem;
            --distance: 8.990817690070898rem;
            --position: 36.448104288997634%;
            --time: 3.6292195465271666s;
            --delay: -2.783360440957908s;
          "
        ></div>
        <div
          class="bubble"
          style="
            --size: 3.8314778634727586rem;
            --distance: 8.654317554044418rem;
            --position: 53.251535799767915%;
            --time: 3.29379428542768s;
            --delay: -2.5139142012261613s;
          "
        ></div>
      </div>
      <div class="content">
        <div>
          <!-- <div>
            <b>Eldew</b><a href="#">Secuce</a><a href="#">Drupand</a
            ><a href="#">Oceash</a><a href="#">Ugefe</a><a href="#">Babed</a>
          </div>
          <div>
            <b>Spotha</b><a href="#">Miskasa</a><a href="#">Agithe</a
            ><a href="#">Scesha</a><a href="#">Lulle</a>
          </div>
          <div>
            <b>Chashakib</b><a href="#">Chogauw</a><a href="#">Phachuled</a
            ><a href="#">Tiebeft</a><a href="#">Ocid</a><a href="#">Izom</a
            ><a href="#">Ort</a>
          </div>
          <div>
            <b>Athod</b><a href="#">Pamuz</a><a href="#">Vapert</a
            ><a href="#">Neesk</a><a href="#">Omemanen</a>
          </div> -->
        </div>
        <div>
          <a
            class="image"
            href="#"
            style="
              background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/happy.svg');
            "
          ></a>
          <p>大学生兼职平台</p>
        </div>
      </div>
    </div>
    <svg style="position: fixed; bottom: 100vh">
      <defs>
        <filter id="blob">
          <feGaussianBlur
            in="SourceGraphic"
            stdDeviation="10"
            result="blur"
          ></feGaussianBlur>
          <feColorMatrix
            in="blur"
            mode="matrix"
            values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
            result="blob"
          ></feColorMatrix>
          <!--feComposite(in="SourceGraphic" in2="blob" operator="atop") //After reviewing this after years I can't remember why I added this but it isn't necessary for the blob effect-->
        </filter>
      </defs>
    </svg>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  computed: {},
  methods: {},
};
</script>
<style>
.body {
  display: grid;
  grid-template-rows: 1fr 10rem auto;
  grid-template-areas: "main" "." "footer";
  overflow-x: hidden;
  background: #f5f7fa;
  font-family: "Open Sans", sans-serif;
}
.body .footer {
  z-index: 1;
  --footer-background: #8ed1fc;
  display: grid;
  position: relative;
  grid-area: footer;
  min-height: 12rem;
}
.body .footer .bubbles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1rem;
  background: var(--footer-background);
  filter: url("#blob");
}
.body .footer .bubbles .bubble {
  position: absolute;
  left: var(--position, 50%);
  background: var(--footer-background);
  border-radius: 100%;
  -webkit-animation: bubble-size var(--time, 4s) ease-in infinite
      var(--delay, 0s),
    bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  animation: bubble-size var(--time, 4s) ease-in infinite var(--delay, 0s),
    bubble-move var(--time, 4s) ease-in infinite var(--delay, 0s);
  transform: translate(-50%, 100%);
}
.body .footer .content {
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 4rem;
  padding: 2rem;
  background: var(--footer-background);
}
.body .footer .content a,
.body .footer .content p {
  color: #f5f7fa;
  text-decoration: none;
}
.body .footer .content b {
  color: white;
}
.body .footer .content p {
  margin: 0;
  font-size: 0.75rem;
}
.body .footer .content > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.body .footer .content > div > div {
  margin: 0.25rem 0;
}
.body .footer .content > div > div > * {
  margin-right: 0.5rem;
}
.body .footer .content > div .image {
  align-self: center;
  width: 4rem;
  height: 4rem;
  margin: 0.25rem 0;
  background-size: cover;
  background-position: center;
}

@-webkit-keyframes bubble-size {
  0%,
  75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}

@keyframes bubble-size {
  0%,
  75% {
    width: var(--size, 4rem);
    height: var(--size, 4rem);
  }
  100% {
    width: 0rem;
    height: 0rem;
  }
}
@-webkit-keyframes bubble-move {
  0% {
    bottom: -4rem;
  }
  100% {
    bottom: var(--distance, 10rem);
  }
}
@keyframes bubble-move {
  0% {
    bottom: -4rem;
  }
  100% {
    bottom: var(--distance, 10rem);
  }
}
</style>
